<template>
  <div class="login-page">
    <yd-flexbox direction="vertical">
      <yd-flexbox-item class="flex-item">
        <img class="logo-img" src="../../assets/img/logo.png" alt="">
        <yd-cell-group>
          <yd-cell-item class="cell-item">
            <span class="label" slot="left"><yd-icon name="ucenter-outline" size=".4rem" color="#FF685D"></yd-icon></span>
            <yd-input class="input" ref="userPhone" slot="right" required v-model="formData.userName" regex="mobile" placeholder="请输入手机号"></yd-input>
          </yd-cell-item>
          <yd-cell-item class="cell-item">
            <span class="label" slot="left"><yd-icon name="ucenter-outline" size=".4rem" color="#FF685D"></yd-icon></span>
            <input class="input" ref="code" required type="text" v-model="formData.code" slot="right" placeholder="请输入验证码">
            <yd-sendcode slot="right" v-model="start" @click.native="sendCode" type="warning"></yd-sendcode>
          </yd-cell-item>
          <yd-cell-item class="cell-item">
            <span class="label" slot="left"><yd-icon name="verifycode" size=".4rem" color="#FF685D"></yd-icon></span>
            <yd-input class="input" ref="password" slot="right" type="password" v-model="formData.password" placeholder="请输入密码"></yd-input>
          </yd-cell-item>
          <yd-button class="button-login" @click.native="register" size="large" type="primary">注册</yd-button>
        </yd-cell-group>
        <div class="tips">已有账号？去<router-link style="color: #10aeff;" to="/login">登录</router-link></div>
      </yd-flexbox-item>
    </yd-flexbox>
  </div>
</template>
<script>
export default {
  name: 'Register',
  data () {
    return {
      formData: {
        userName: '18888888888',
        code: '',
        password: ''
      },
      start: false
    }
  },
  mounted() {
    // this.init()
  },
  methods: {
    init () {
      sessionStorage.clear()
    },
    sendCode () {
      this.$dialog.loading.open('发送中...')
      setTimeout(() => {
        this.start = true
        this.$dialog.loading.close()

        this.$dialog.toast({
            mes: '已发送',
            icon: 'success',
            timeout: 1500
        });
      }, 1000)
    },
    register () {
      const userPhone = this.$refs.userPhone
      const password = this.$refs.password
      const code = this.$refs.code
      if (userPhone.valid && password.valid && code.value !== '') {
        this.$dialog.toast({
          mes: '注册成功！',
          timeout: 1500,
          callback: () => {
            this.$router.push({ name: 'login' })
          }
        })
      }
      else {
        this.$dialog.toast({ mes: '请填写正确的手机号、密码、验证码！', timeout: 1500 })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.login-page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../../assets/img/login_bg.jpg) center bottom no-repeat;
  background-size: cover;
  .flex-item {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3rem;
    margin-top: -3.6rem;
    padding: .4rem .2rem;
    width: 6rem;
    height: 7.2rem;
    background-color: #fff;
    .logo-img {
      display: block;
      margin: 0 auto;
      margin-bottom: .4rem;
      max-width: 1rem;
    }
    .cell-item {
      margin-bottom: .2rem;
      border: 1px solid #ccc;
      .label {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: -0.24rem;
        width: 1rem;
        height: 100%;
        text-align: center;
        border-right: 1px solid #ccc;
      }
      .input {
        padding-left: .24rem;
      }
    }
    .tips {
      font-size: .26rem;
      text-align: center;
    }
  }
}
.yd-btn-block {
  margin-top: .4rem;
}
</style>
